<template>
    <view id="main">
        <view class="content">
            <view class="card">
                <view class="tag" :class="'Tag' + currentData.statusCode">{{ currentData.status }}</view>
                <view class="item flex">
                    <view class="label fs_12">数字识别码</view>
                    <view class="value color_black fs_12">
                        91410600567299509600026115250202408260002
                    </view>
                </view>
                <view class="item flex">
                    <view class="label fs_12">入库时间</view>
                    <view class="value color_black fs_12">
                        2024-08-26 13:58:54
                    </view>
                </view>
                <view class="item flex">
                    <view class="label fs_12">废物名称</view>
                    <view class="value color_black fs_12">
                        催化焚烧废催化剂
                    </view>
                </view>
                <view class="item flex">
                    <view class="label fs_12">废物代码</view>
                    <view class="value color_black fs_12">
                        261-152-50
                    </view>
                </view>
                <view class="item flex">
                    <view class="label fs_12">入库重量(kg)</view>
                    <view class="value  color_black fs_12">
                        154.5
                    </view>
                </view>
                <view class="item flex">
                    <view class="label fs_12">贮存设施编码</view>
                    <view class="value color_black fs_12"> TS007 </view>
                </view>
                <view class="item flex">
                    <view class="label fs_12">贮存设施名称</view>
                    <view class="value color_black fs_12">
                        甲醇装置危废库
                    </view>
                </view>
                <view class="item flex">
                    <view class="label fs_12">运送部门经办人</view>
                    <view class="value color_black fs_12"> 李军福 </view>
                </view>
                <view class="item flex">
                    <view class="label fs_12">贮存部门经办人</view>
                    <view class="value color_black fs_12"> 李军福 </view>
                </view>
                <view v-if="currentData.statusCode == '2'" class="item flex">
                    <view class="label fs_12">失败原因</view>
                    <view class="value color_red fs_12">
                        本年度管理计划中未填报该废物,请进行管理计划废物备案后再进行入库
                    </view>
                </view>
            </view>
            <view class="footer">
                <zy-btn v-if="currentData.statusCode === '2'">重新上报</zy-btn>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
const currentData = reactive({});
onLoad((options: any) => {
    console.log('onLoad', JSON.parse(options.data));
    Object.assign(currentData, JSON.parse(options.data));
});
</script>

<style lang="scss" scoped>
.content {
    padding: 14px;
    width: 100vw;

    .card {
        border-radius: 4px;
        margin: 0 0 20px 0;
        position: relative;
        padding: 30px 20px 20px 20px;

        .tag {
            position: absolute;
            border-radius: 6px 0px 6px 0px;
            font-size: 12px;
            top: 0;
            left: 0;
            padding: 4px 10px;
            width: fit-content;
            color: #fff;

            &.Tag0 {
                background: linear-gradient(270.00deg, rgb(24, 88, 230), rgb(24, 88, 230) 100%);
            }

            &.Tag1 {
                background: linear-gradient(180.00deg, rgb(251, 136, 50), rgb(251, 136, 50) 100%);
            }

            &.Tag2 {
                background: rgb(225, 65, 70);
            }

            &.Tag3 {
                background: rgb(204, 209, 222);
            }
        }

        .item {
            align-items: start;
            border-bottom: 1px solid #eee;
            padding: 16px 0;
            font-size: 14px;

            &:last-child {
                border-bottom: none;
            }

            .label {
                white-space: nowrap;
                width: 30%;
            }

            .value {
                word-break: break-all;
                width: 70%;
            }
        }
    }

    .footer {
        .zk_btn {
            width: 100%;
        }
    }
}
</style>
